@extends('web.frame_layout')
<?php $parent_menu = "虚拟货币"; $menu_selected = "交易大厅";?>
<link rel="stylesheet" href="{{asset('web/css/trading-hall.css')}}">
@section('content')

        <div class="m-right-nr">
            <div>
                <h2><span>交易大厅</span></h2>
            </div>
            <div class="m-main row">
                <div class="col-sm-12 col-md-8 tu-box" id="tu-box"></div>
                <div class="col-sm-12 col-md-4 card-box">
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                            <a href="#buy" aria-controls="buy" role="tab"
                               data-toggle="tab">买入</a>
                        </li>
                        <li role="presentation">
                            <a href="#sell" aria-controls="sell" role="tab" data-toggle="tab">卖出</a>
                        </li>
                        <li role="presentation">
                            <a href="#entrust" aria-controls="entrust " role="tab" data-toggle="tab">我的委托</a>
                        </li>
                    </ul>
                    <form class="request_tx" id="request_tx" autocomplete="on">
                        <div class="tab-content m-cart">
                            <div role="tabpanel" class="tab-pane active" id="buy">
                                <h3>最佳买入价：<span>10.00</span>元</h3>
                                <h3>最大可买：<span>10</span> BTC</h3>
                                <ul>
                                    <li><h4>买入量</h4><input type="text"><h5>BTC</h5></li>
                                    <li><h4>交易额</h4><input type="text"><h5>CNY</h5></li>
                                    <li><h4>交易密码</h4><input type="password"></li>
                                    <li class="noBor"><a href="###">下单比例</a><a href="###">1/4</a><a href="###">1/3</a><a href="###">1/2</a><a href="###">1/1</a></li>
                                    <li class="noBor"><button>买入</button></li>
                                </ul>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="sell">
                                <h3>最佳卖出价：<span>10.00</span>元</h3>
                                <h3>最大可卖：<span>10.00</span> BTC</h3>
                                <ul>
                                    <li><h4>卖出价</h4><input type="text"><h5>CNY</h5></li>
                                    <li><h4>卖出量</h4><input type="text"><h5>BTC</h5></li>
                                    <li><h4>交易额</h4><input type="text"><h5>CNY</h5></li>
                                    <li><h4>交易密码</h4><input type="password"></li>
                                    <li class="noBor"><a href="###">下单比例</a><a href="###">1/4</a><a href="###">1/3</a><a href="###">1/2</a><a href="###">1/1</a></li>
                                    <li class="noBor"><button>卖出</button></li>
                                </ul>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="entrust">
                                <div class="table-responsive">
                                    <table class="table">
                                        <tr>
                                            <th>类型</th>
                                            <th>委托价格</th>
                                            <th>数量</th>
                                            <th>操作</th>
                                        </tr>
                                        <tr>
                                            <td class="mr">买入</td>
                                            <td>￥1200</td>
                                            <td>1211</td>
                                            <td><a href="###">撤销</a></td>
                                        </tr>
                                        <tr>
                                            <td class="mc">卖出</td>
                                            <td>￥1200</td>
                                            <td>1211</td>
                                            <td><a href="###">撤销</a></td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-sm-12 col-md-8 deal-list">
                    <div class="table-responsive">
                        <table class="table">
                            <tr class="active">
                                <th>成交时间</th>
                                <th>类型</th>
                                <th>成交价格</th>
                                <th>成交量</th>
                                <th>总计</th>
                            </tr>
                            <tr>
                                <td>09:30:01</td>
                                <td>买入</td>
                                <td>￥1200</td>
                                <td>121</td>
                                <td>￥12000</td>
                            </tr>
                            <tr>
                                <td>09:30:01</td>
                                <td>买入</td>
                                <td>￥1200</td>
                                <td>121</td>
                                <td>￥12000</td>
                            </tr>

                        </table>
                    </div>
                </div>
                <div class="col-sm-12 col-md-4 deal-rule">
                    <div class="rule-title">
                        <h2>货币交易规则：</h2>
                        <p>交易时间：每天 00:00 - 24:00（北京时间）！</p>
                        <p>涨跌幅限制：无日涨跌限制！</p>
                    </div>
                    <div class="entrust">
                        <h2>最新卖出委托（5条）</h2>
                        <div class="table-responsive">
                            <table class="table">
                                <tr class="active">
                                    <th>卖出</th>
                                    <th>卖出价</th>
                                    <th>数量</th>
                                </tr>
                                <tr>
                                    <td>卖出（1）</td>
                                    <td>￥12.00</td>
                                    <td>121个</td>
                                </tr>
                                <tr>
                                    <td>卖出（1）</td>
                                    <td>￥12.00</td>
                                    <td>121个</td>
                                </tr>
                                <tr>
                                    <td>卖出（1）</td>
                                    <td>￥12.00</td>
                                    <td>121个</td>
                                </tr>
                                <tr>
                                    <td>卖出（1）</td>
                                    <td>￥12.00</td>
                                    <td>121个</td>
                                </tr>
                                <tr>
                                    <td>卖出（1）</td>
                                    <td>￥12.00</td>
                                    <td>121个</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="entrust">
                        <h2>最新买入委托（5条）</h2>
                        <div class="table-responsive">
                            <table class="table">
                                <tr class="active">
                                    <th>买入</th>
                                    <th>买入价</th>
                                    <th>数量</th>
                                </tr>
                                <tr>
                                    <td>买入（1）</td>
                                    <td>￥12.00</td>
                                    <td>121个</td>
                                </tr>
                                <tr>
                                    <td>买入（1）</td>
                                    <td>￥12.00</td>
                                    <td>121个</td>
                                </tr>
                                <tr>
                                    <td>买入（1）</td>
                                    <td>￥12.00</td>
                                    <td>121个</td>
                                </tr>
                                <tr>
                                    <td>买入（1）</td>
                                    <td>￥12.00</td>
                                    <td>121个</td>
                                </tr>
                                <tr>
                                    <td>买入（1）</td>
                                    <td>￥12.00</td>
                                    <td>121个</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

@endsection

@section('footer')
    <script src="{{asset('web/js/echarts.min.js')}}"></script>
    <script src="{{asset('web/js/trading-hall.js')}}"></script>
@endsection